<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="demo-image__lazy">
            <div class="container" v-for="url in urls" :key="url">
                <el-image class="image-wrapper" :src="url" :preview-src-list="urls" lazy></el-image>
            </div>
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";
import albumInfoApi from "@/api/albumInfo";


export default {
    components: {
        NavigationBar,
    },
    data() {
        return {
            albumInfo: {},
            pageData: {},
            albumData: [],
            urls: [],
        };
    },
    methods: {
        // methods here
        async getAlbumDetail(albumInfo) {
            // get album detail here
            try {
                const response = await albumInfoApi.getAlbumPageInfoDetail(albumInfo);
                this.pageData = response; // 将获取的数据存储在组件的状态中
                this.albumData = response.result;
                const urlss = []; // 将获取的数据存储在组件的状态中
                for (let i = 0; i < this.albumData.length; i++) {
                    urlss[i] = this.albumData[i].albumDtlUrl;
                }
                this.urls = urlss;
                const img = new Image();
                img.src = "http://114.67.177.147:9000/hxiaoyi/广州白云山一日爬/7a6dc927133652accccb40bddff5aee.jpg";
                img.onload = () => {
                    console.log('图片宽度:', img.naturalWidth);
                    console.log('图片高度:', img.naturalHeight);
                };
                console.log('获取数据成功:', this.urls); // 打印获取的数据
                return response;
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
    },
    mounted() {
        // mounted here
        console.log('当前相册ID:', this.$route.params.albumId);
        this.albumInfo = { albumId: this.$route.params.albumId };
        this.getAlbumDetail(this.albumInfo);
    },
};
</script>

<style scoped>
.demo-image__lazy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 每行显示3列 */
    gap: 10px;
    /* 设置列间距 */
    margin-top: 10px;
}
.container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
    background-color: aqua;
}

.image-wrapper {
    width: 100%; 
    height: auto;
    /* object-fit: none; */
    transform: translateY(-30%);
    /* transform: translateX(-30%); */
}   
</style>
